<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>

    <!--
        三种引入方式：
            内嵌式:直接在标签上加样式属性
            内部式: 在head处使用style标签
            外部式:
                外部需要一个CSS文件
                使用link标签指定文件位置

            当多个样式作用于同一个标签时，符合就近原则

        选择器：
            -元素选择器    元素{样式}
            -id选择器      #id{样式}
            -类选择器      .class{样式}
        常见属性：见w3c
    -->

    <!--内部样式-->
    <style>
        /*元素选择器*/
        div {
            background-color: cornflowerblue; /*矢车菊蓝*/
        }

        /*id选择器*/
        #myDiv {
            background-color: red;
        }

        #myDiv2 {
            color: red;
            font-size: 50px;
            font-family: 'Courier New';
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
            width: 50%;
            height: 100px;
            margin-bottom: 10px;
            background-color: aquamarine;
        }

        /*类选择器*/
        .myClass {
            color: darkblue;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="../css/myStyle.css">
</head>

<body>
<!-- 内嵌式 -->
<div style="border: 3px solid red;height: 200px;width:200px;border-radius:85px;" class="myClass">大家好，我是一个div
</div>
<div>大家好，我也是一个div</div>
<div id="myDiv" class="myClass">大家好，我是myDiv</div>
<span>你们好，我是span</span>
<div id="myDiv2">哈哈哈</div>
</body>
</html>